import { targetCuesTopic } from '@/services/api/api-analysis';
import { TinyColumn } from '@ant-design/charts';
import { ClockCircleOutlined, EllipsisOutlined, SmallDashOutlined } from '@ant-design/icons';
import { StatisticCard } from '@ant-design/pro-card';
import { TableDropdown } from '@ant-design/pro-components';
import { useModel } from 'umi';
import { Divider, Dropdown, MenuProps, Radio, Skeleton, Space, Spin } from 'antd';
import { useEffect, useState } from 'react';

interface TargetCuesTopicCardProps { }

const TargetCuesTopicCard: React.FC<TargetCuesTopicCardProps> = ({ }) => {
  const [dataTargetCuesTopic, setDataTargetCuesTopicState] =
    useState<AnalysisData.TargetCuesTopic>();
  const [loading, setLoading] = useState(false);
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const [dataTabSelectDay, setDataTabSelectDayState] = useState<number>(60);

  /**
   * 线索征集
   * @param key
   */
  const loadTargetCuesTopicCardData = async (day: number) => {
    try {
      const response = await targetCuesTopic({ day: -day });
      if (response.code === 0) {
        setDataTargetCuesTopicState(response.data);
      }
      setLoading(false)
    } catch (error) { }
  };


  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    loadTargetCuesTopicCardData(60)
    setDataTabSelectDayState(60)
  };

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    setLoading(true)
    loadTargetCuesTopicCardData(Number(e.key))
    setDataTabSelectDayState(Number(e.key))
  };

  const items: MenuProps['items'] = [
    {
      label: '7天',
      key: '7',
      icon: <ClockCircleOutlined />,
    },
    {
      label: '本月',
      key: '',
      icon: <ClockCircleOutlined />,
    },
    {
      label: '90天',
      key: '90',
      icon: <ClockCircleOutlined />,
    },
  ];

  const menuProps = {
    items,
    onClick: handleMenuClick,
  };

  useEffect(() => {
    loadTargetCuesTopicCardData(dataTabSelectDay);
  }, []);

  return (
    <>{dataTargetCuesTopic ? (
      <Spin spinning={loading}>
        <StatisticCard
          title='选题计划'
          style={{ backgroundColor: '#F6F7FB' }}
          extra={
            <>
              {/* <Radio.Group options={options} value={dataTabSelectDay} onChange={(e) => {
            setLoading(true)
            loadTargetCuesTopicCardData(e.target.value)
            setDataTabSelectDayState(e.target.value)
          }} optionType="button" /> */}
              <Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
                60天
              </Dropdown.Button>
              {/* <Radio.Group defaultValue="60" buttonStyle='outline' onChange={(e) => {
                setLoading(true)
                if (e.target.value === 0) {
                  return
                }
                loadTargetCuesTopicCardData(e.target.value)
                setDataTabSelectDayState(e.target.value)
              }}>
                <Radio.Button value="60">60天</Radio.Button>
                <Radio.Button value="0">
                  <TableDropdown
                    key="menu"
                    onSelect={(e) => {
                      setLoading(true)
                      loadTargetCuesTopicCardData(e)
                      setDataTabSelectDayState(e)
                    }}
                    children={<><SmallDashOutlined /></>}
                    menus={[
                      {
                        key: '7',
                        name: '7天',
                      },
                      {
                        key: '',
                        name: '本月',
                      },
                      {
                        key: '90',
                        name: '90天',
                      },
                    ]
                    }
                  />
                </Radio.Button>
              </Radio.Group> */}
            </>}
          // statistic={{
          //   value: `选题 ${dataTargetCuesTopic?.countTopic} 个 `,
          // }}
          chart={
            <>
              {/* <TinyColumn
                height={46}
                autoFit={true}
                data={dataTargetCuesTopic?.trendTopics.map((item) => item.value)}
                tooltip={{
                  customContent: (x, data) => {
                    if (x != null) {
                      return `${dataTargetCuesTopic?.trendTopics[x]?.label}: ${data[0].value}`;
                    } else {
                      return '';
                    }
                  },
                }}
              /> */}
              {(currentUser?.organizationTopId === '6000000000100000' || currentUser?.organizationTopId === '6000000000200000' || currentUser?.organizationTopId === '6000000000300000' || currentUser?.organizationTopId === '6000000000400000') ?
                <div >
                  <h2 style={{marginBottom:57}}>选题 {dataTargetCuesTopic?.countCreatedTopic} 个 </h2>
                </div>
                :
                <div >
                  <h2 >创建选题计划 {dataTargetCuesTopic?.countCreatedTopic} 个</h2>
                  <h2 style={{marginBottom:13}}>接收选题计划 {dataTargetCuesTopic?.countReceiveTopic} 个</h2>
                </div>}
              <Divider />
              <Space>
                <StatisticCard.Statistic
                  title="周同比"
                  value={Math.abs(dataTargetCuesTopic?.weekTrendCount) + ' '}
                  trend={dataTargetCuesTopic?.weekTrendCount > 0 ? 'up' : 'down'}
                />
                <StatisticCard.Statistic
                  title="月同比"
                  value={Math.abs(dataTargetCuesTopic?.monthTrendCount) + ' '}
                  trend={dataTargetCuesTopic.monthTrendCount > 0 ? 'up' : 'down'}
                />
              </Space>
            </>
          }
        /></Spin>
    ) : (
      <StatisticCard title="选题计划" extra={<EllipsisOutlined />}>
        <Skeleton active />
      </StatisticCard>
    )}</>
  );
};

export default TargetCuesTopicCard;
